<template>
    <div class="root">
        <div id="dp" class="dp"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: {
        city: {
            type: String,
            required: true,
            default: ''
        }
    },
    data() {
        return {
            myChart: null,
            cityData: {
                '北京': [120, 132, 101, 134, 90, 230, 210],
                '上海': [220, 182, 191, 234, 290, 330, 310],
                '广州': [150, 232, 201, 154, 190, 330, 410],
                '深圳': [320, 332, 301, 334, 390, 330, 320],
                '四川': [820, 932, 901, 934, 1290, 1330, 1320],
                '重庆': [520, 632, 601, 634, 990, 1030, 1020]
            }
        };
    },
    mounted() {
        console.log('接收城市:', this.city);
        this.$nextTick(() => {
            const chartDom = document.getElementById('dp');
            if (!chartDom) {
                console.error('未找到有效的 DOM 元素');
                return;
            }
            this.myChart = echarts.init(chartDom);
            this.setChartOption();
        });
    },
    watch: {
        city(newValue) {
            console.log('StackedLine 组件接收到的城市:', newValue);
            // 更新图表前先销毁当前实例并重新初始化
            if (this.myChart) {
                this.myChart.dispose();
            }
            this.$nextTick(() => {
                this.myChart = echarts.init(document.getElementById('dp'));
                this.setChartOption();
            });
        }
    },
    methods: {
        setChartOption() {
            let series = [];
            let legendData = [];

            if (this.city === '') {
                for (let cityName in this.cityData) {
                    series.push({
                        name: cityName,
                        type: 'line',
                        stack: 'Total',
                        data: this.cityData[cityName]
                    });
                    legendData.push(cityName);
                }
            } else {
                const selectedCityData = this.cityData[this.city] || [];
                series.push({
                    name: this.city,
                    type: 'line',
                    stack: 'Total',
                    data: selectedCityData
                });
                legendData.push(this.city);
            }

            const option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legendData,
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    axisLabel: { color: '#fff' },
                    axisLine: { lineStyle: { color: '#fff' } },
                    splitLine: { lineStyle: { color: '#fff' } }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: { color: '#fff' },
                    axisLine: { lineStyle: { color: '#fff' } },
                    splitLine: { lineStyle: { color: '#fff' } }
                },
                series: series
            };

            this.myChart && this.myChart.setOption(option);
        }
    }
};
</script>

<style scoped>
.root {
    width: 300px;
    height: 200px;
    margin-top: 20px;
}

.dp {
    width: 420px;
    height: 400px;
    margin-left: 5px;
}
</style>